<template>
  <div class="app-container">
    1
    <div id="myBanner">
      <i class="led led-jack"></i>
      <i class="led led-rose"></i>
    </div>
  </div>
</template>

<script>
export default {
  created () {}
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 821px;
  // margin-top: 34px !important;
  background: #ebeef5;
  // margin-top: 35px;
  overflow: auto;
  @media screen and (max-width: 400px) {
    margin-top: 270px;
  }
  // 适配谷歌火狐，没有书签栏的上下边距
  @media screen and (min-height: 950px) and (max-height: 990px) {
    height: 885px !important;
  }
  // 适配浏览器全屏模式下的上下边距
  @media screen and (min-height: 1070px) {
    height: 996px;
  }
  // 手机端适配
  @media screen and (max-width: 400px) {
    margin-top: 295px !important;
    width: 100%;
    height: 3070px;
    background-color: skyblue;
  }
  #myBanner {
    .led {
      display: block;
      position: absolute;
      right: 16%;
      top: 0;
      height: 12em;
      width: 2px;
      background-color: #000;
      -webkit-transform-origin: 0 -1em;
      -moz-transform-origin: 0 -1em;
      -ms-transform-origin: 0 -1em;
      -o-transform-origin: 0 -1em;
      transform-origin: 0 -1em;
      -webkit-animation: swing 3.5s ease-in-out forwards infinite;
      -moz-animation: swing 3.5s ease-in-out forwards infinite;
      -ms-animation: swing 3.5s ease-in-out forwards infinite;
      -o-animation: swing 3.5s ease-in-out forwards infinite;
      animation: swing 3.5s ease-in-out forwards infinite;
      &:before {
        content: '';
        display: block;
        width: 6em;
        height: 3em;
        background-color: #111;
        position: absolute;
        top: 12em;
        left: -2.9em;
        border-radius: 4em 4em 0 0;
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1),
          inset 3px 3px 3px hsla(0, 0%, 100%, 0.2),
          inset -3px -3px 3px hsla(0, 0%, 0%, 0.2),
          1.5em -1em 3px hsla(0, 0%, 0%, 0.15);
      }
      // &:after {
      //   content: '';
      //   display: block;
      //   position: absolute;
      //   left: 1.5em;
      //   top: -1em;
      //   width: 1px;
      //   height: inherit;
      //   background-color: hsla(0, 0%, 0%, 0.1);
      //   box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.15);
      // }
    }
    .led-rose {
      right: 30%;
      top: 0;
      height: 10em;
    }
    .led-rose:before {
      top: 10em;
    }
    @keyframes swing {
      0% {
        -webkit-transform: translateX(-50%) rotate(4deg);
        -moz-transform: translateX(-50%) rotate(4deg);
        -ms-transform: translateX(-50%) rotate(4deg);
        -o-transform: translateX(-50%) rotate(4deg);
        transform: translateX(-50%) rotate(4deg);
      }
      50% {
        -webkit-transform: translateX(-50%) rotate(-4deg) skewX(5deg)
          skewY(-2deg);
        -moz-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
        -ms-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
        -o-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
        transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
      }
      100% {
        -webkit-transform: translateX(-50%) rotate(4deg);
        -moz-transform: translateX(-50%) rotate(4deg);
        -ms-transform: translateX(-50%) rotate(4deg);
        -o-transform: translateX(-50%) rotate(4deg);
        transform: translateX(-50%) rotate(4deg);
      }
    }
    @-webkit-keyframes swing {
      0% {
        -webkit-transform: translateX(-50%) rotate(4deg);
      }
      50% {
        -webkit-transform: translateX(-50%) rotate(-4deg) skewX(5deg)
          skewY(-2deg);
      }
      100% {
        -webkit-transform: translateX(-50%) rotate(4deg);
      }
    }
  }
}
</style>
